<!--抖音结算单-->
<script setup lang="ts">
    import {AxiosPromise} from "axios";

    defineOptions({
        name: "DyBill",
        inheritAttrs: false,
    });

    import {ElLoading, UploadFile} from "element-plus";
    import {
        getDyBillPage,
        getDyBillForm,
        saveDyBill,
        deleteDyBill,
        importDyBill,
        exportDyBill
    } from "@/api/dyBill";

    const queryFormRef = ref(ElForm);
    const dataFormRef = ref(ElForm);

    const loading = ref(false);
    const ids = ref<number[]>([]);
    const total = ref(0);

    const queryParams = reactive<any>({
        pageNum: 1,
        pageSize: 20,
    });

    const dyBillList = ref<[]>();

    const dialog = reactive<DialogOption>({
        visible: false,
    });
    const importDialog = reactive<DialogOption>({
        title: "抖音结算单数据导入",
        visible: false,
    });

    const excelFile = ref<File>();
    const excelFilelist = ref<File[]>([]);
    const formData = reactive<any>({});

    const rules = reactive({
        storeId: [{ required: true, message: "请输入店铺ID", trigger: "blur" }],
        settlementTime: [{ required: true, message: "请输入结算时间", trigger: "blur" }],
        orderNo: [{ required: true, message: "请输入订单号", trigger: "blur" }],
        subOrderNo: [{ required: true, message: "请输入子订单号", trigger: "blur" }],
        settlementPrice: [{ required: true, message: "请输入结算金额", trigger: "blur" }],
        settlementAccount: [{ required: true, message: "请输入结算账户", trigger: "blur" }],
        settlementType: [{ required: true, message: "请输入结算单类型", trigger: "blur" }],
        settlementRefund: [{ required: true, message: "请输入有结算前退款", trigger: "blur" }],
        orderTime: [{ required: true, message: "请输入下单时间", trigger: "blur" }],
        productId: [{ required: true, message: "请输入商品ID", trigger: "blur" }],
        quantity: [{ required: true, message: "请输入商品数量", trigger: "blur" }],
        businessType: [{ required: true, message: "请输入业务类型", trigger: "blur" }],
        orderType: [{ required: true, message: "请输入订单类型", trigger: "blur" }],
        orderAmount: [{ required: true, message: "请输入订单总价", trigger: "blur" }],
        productAmount: [{ required: true, message: "请输入商品总价", trigger: "blur" }],
        transportFee: [{ required: true, message: "请输入运费", trigger: "blur" }],
        preferential: [{ required: true, message: "请输入店铺劵", trigger: "blur" }],
        settlementRefundAmount: [{ required: true, message: "请输入结算前退款金额", trigger: "blur" }],
        preformSubsidy: [{ required: true, message: "请输入平台补贴", trigger: "blur" }],
        drSubsidy: [{ required: true, message: "请输入达人补贴", trigger: "blur" }],
        dySubsidy: [{ required: true, message: "请输入抖音支付补贴", trigger: "blur" }],
        dyMonthSubsidy: [{ required: true, message: "请输入抖音月付营销补贴", trigger: "blur" }],
        bankSubsidy: [{ required: true, message: "请输入银行补贴", trigger: "blur" }],
        deduction: [{ required: true, message: "请输入以旧换新抵扣", trigger: "blur" }],
        platformSubsidyFee: [{ required: true, message: "请输入平台补贴运费", trigger: "blur" }],
        buyAmount: [{ required: true, message: "请输入用户实付", trigger: "blur" }],
        reiceveAmount: [{ required: true, message: "请输入收入合计", trigger: "blur" }],
        serviceAmount: [{ required: true, message: "请输入平台服务费", trigger: "blur" }],
        commission: [{ required: true, message: "请输入达人佣金", trigger: "blur" }],
        carrierCommission: [{ required: true, message: "请输入服务商佣金", trigger: "blur" }],
        channelFee: [{ required: true, message: "请输入渠道分成", trigger: "blur" }],
        investmentServiceFee: [{ required: true, message: "请输入招商服务费", trigger: "blur" }],
        promotionFee: [{ required: true, message: "请输入站外推广费", trigger: "blur" }],
        otherFee: [{ required: true, message: "请输入其他分成", trigger: "blur" }],
        otherFeeRemark: [{ required: true, message: "请输入其他分成说明", trigger: "blur" }],
        payAmount: [{ required: true, message: "请输入支出合计", trigger: "blur" }],
        noCommission: [{ required: true, message: "请输入是否免佣", trigger: "blur" }],
        noCommissionAmount: [{ required: true, message: "请输入免佣金额", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
    });




    /**
     * 查询
     */
    function handleQuery() {
        loading.value = true;
        getDyBillPage(queryParams)
            .then(({ data }) => {
                dyBillList.value = data.list;
                total.value = data.total;
            })
            .finally(() => {
                loading.value = false;
            });
    }

    /**
     * 重置查询
     */
    function resetQuery() {
        queryFormRef.value.resetFields();
        queryParams.pageNum = 1;
        handleQuery();
    }

    /**
     * 行checkbox change事件
     */
    function handleSelectionChange(selection: any) {
        ids.value = selection.map((item: any) => item.id);
    }

    /**
     * 打开字典类型表单弹窗
     *
     * @param dicTypeId 字典类型ID
     */
    function openDialog(id?: number) {
        dialog.visible = true;
        if (id) {
            dialog.title = "修改抖音结算单";
            getDyBillForm(id).then(({ data }) => {
                Object.assign(formData, data);
            });
        } else {
            dialog.title = "新增抖音结算单";
        }
    }

    /**
     * 字典类型表单提交
     */
    function handleSubmit() {
        dataFormRef.value.validate((isValid: boolean) => {
            if (isValid) {
                loading.value = false;
                saveDyBill(formData)
                    .then(() => {
                        ElMessage.success("保存成功");
                        closeDialog();
                        handleQuery();
                    })
                    .finally(() => (loading.value = false));
            }
        });
    }

    /**
     * 关闭弹窗
     */
    function closeDialog() {
        dialog.visible = false;
        resetForm();
    }

    /**
     * 重置表单
     */
    function resetForm() {
        dataFormRef.value.resetFields();
        dataFormRef.value.clearValidate();

        formData.id = undefined;
    }

    /**
     * 删除抖音结算单
     */
    function handleDelete(id?: number) {
        const dictTypeIds = [id || ids.value].join(",");
        if (!dictTypeIds) {
            ElMessage.warning("请勾选删除项");
            return;
        }

        ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            deleteDyBill(dictTypeIds).then(() => {
                ElMessage.success("删除成功");
                resetQuery();
            });
        });
    }

    /** 打开导入弹窗 */
    async function openImportDialog() {
        importDialog.visible = true;
    }

    /**
     * Excel文件change事件
     *
     * @param file
     */
    function handleExcelChange(file: UploadFile) {
        if (file.size !== undefined) {
            if (file.size > 20*1024*1024) {
                ElMessage.warning("上传文件大小不能超过20M");
                return false
            }
        }
        if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
            ElMessage.warning("上传Excel只能为xlsx、xls格式");
            excelFile.value = undefined;
            excelFilelist.value = [];
            return false;
        }
        excelFile.value = file.raw;
    }

    /** 导入提交 */
    function handleImport() {
        if (!excelFile.value) {
            ElMessage.warning("上传Excel文件不能为空");
            return false;
        }
        const importLoading = ElLoading.service({
            lock: true,
            text: '导入中...',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        importDyBill(excelFile.value).then((response) => {

            closeImportDialog();
            ElMessage.success('导入成功');
            resetQuery();
        }).finally(() => importLoading.close());
    }

    /**  关闭导入弹窗 */
    function closeImportDialog() {
        importDialog.visible = false;
        excelFile.value = undefined;
        excelFilelist.value = [];
    }

    /** 导出抖音结算单 */
    function handleExport() {
        const strIds = [ids.value].join(",");
        exportDyBill(strIds).then((response: any) => {
            const blob = new Blob([response.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
            });
            const a = document.createElement("a");
            const href = window.URL.createObjectURL(blob); // 下载的链接
            a.href = href;
            a.download = decodeURI(
                response.headers["content-disposition"].split(";")[1].split("=")[1]
            ); // 获取后台设置的文件名称
            document.body.appendChild(a);
            a.click(); // 点击导出
            document.body.removeChild(a); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
        });
    }

    onMounted(() => {
        handleQuery();
    });
</script>

<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item label="关键词" prop="keywords">
                    <el-input
                            v-model="queryParams.keywords"
                            placeholder="关键词"
                            clearable
                            @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery()"
                    ><i-ep-search />搜索</el-button
                    >
                    <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card shadow="never">
            <template #header>
                <div class="flex justify-between">
                    <div>
                        <el-button
                                v-hasPerm="['sys:dyBill:save']"
                                type="success"
                                @click="openDialog()"
                        ><i-ep-plus />新增</el-button
                        >
                        <el-button
                                type="danger"
                                :disabled="ids.length === 0"
                                @click="handleDelete()"
                                v-hasPerm="['sys:dyBill:delete']"
                        ><i-ep-delete />删除</el-button
                        >
                    </div>
                    <div>
                        <el-button class="ml-3" @click="openImportDialog" v-hasPerm="['sys:dyBill:import']"
                        ><template #icon><i-ep-top /></template>导入</el-button
                        >
                        <el-button class="ml-3" @click="handleExport" v-hasPerm="['sys:dyBill:export']"
                        ><template #icon><i-ep-download /></template>导出</el-button
                        >
                    </div>
                </div>
            </template>
            <el-table
                    size="small"
                    :header-row-style="{color: 'dimgray'}"
                    v-loading="loading"
                    highlight-current-row
                    :data="dyBillList"
                    border
                    @selection-change="handleSelectionChange"
                    :height="dyBillList && dyBillList.length > 0 ? 580 : 130"
            >
                <el-table-column type="selection" width="40" align="center" show-overflow-tooltip />
                <el-table-column label="店铺ID" prop="storeId" width="100" show-overflow-tooltip/>
                <el-table-column label="结算时间" prop="settlementTime" width="100" show-overflow-tooltip/>
                <el-table-column label="订单号" prop="orderNo" width="100" show-overflow-tooltip/>
                <el-table-column label="子订单号" prop="subOrderNo" width="100" show-overflow-tooltip/>
                <el-table-column label="结算金额" prop="settlementPrice" width="100" show-overflow-tooltip/>
                <el-table-column label="结算账户" prop="settlementAccount" width="100" show-overflow-tooltip/>
                <el-table-column label="结算单类型" prop="settlementType" width="100" show-overflow-tooltip/>
                <el-table-column label="有结算前退款" prop="settlementRefund" width="100" show-overflow-tooltip/>
                <el-table-column label="下单时间" prop="orderTime" width="100" show-overflow-tooltip/>
                <el-table-column label="商品ID" prop="productId" width="100" show-overflow-tooltip/>
                <el-table-column label="商品数量" prop="quantity" width="100" show-overflow-tooltip/>
                <el-table-column label="业务类型" prop="businessType" width="100" show-overflow-tooltip/>
                <el-table-column label="订单类型" prop="orderType" width="100" show-overflow-tooltip/>
                <el-table-column label="订单总价" prop="orderAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="商品总价" prop="productAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="运费" prop="transportFee" width="100" show-overflow-tooltip/>
                <el-table-column label="店铺劵" prop="preferential" width="100" show-overflow-tooltip/>
                <el-table-column label="结算前退款金额" prop="settlementRefundAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="平台补贴" prop="preformSubsidy" width="100" show-overflow-tooltip/>
                <el-table-column label="达人补贴" prop="drSubsidy" width="100" show-overflow-tooltip/>
                <el-table-column label="抖音支付补贴" prop="dySubsidy" width="100" show-overflow-tooltip/>
                <el-table-column label="抖音月付营销补贴" prop="dyMonthSubsidy" width="100" show-overflow-tooltip/>
                <el-table-column label="银行补贴" prop="bankSubsidy" width="100" show-overflow-tooltip/>
                <el-table-column label="以旧换新抵扣" prop="deduction" width="100" show-overflow-tooltip/>
                <el-table-column label="平台补贴运费" prop="platformSubsidyFee" width="100" show-overflow-tooltip/>
                <el-table-column label="用户实付" prop="buyAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="收入合计" prop="reiceveAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="平台服务费" prop="serviceAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="达人佣金" prop="commission" width="100" show-overflow-tooltip/>
                <el-table-column label="服务商佣金" prop="carrierCommission" width="100" show-overflow-tooltip/>
                <el-table-column label="渠道分成" prop="channelFee" width="100" show-overflow-tooltip/>
                <el-table-column label="招商服务费" prop="investmentServiceFee" width="100" show-overflow-tooltip/>
                <el-table-column label="站外推广费" prop="promotionFee" width="100" show-overflow-tooltip/>
                <el-table-column label="其他分成" prop="otherFee" width="100" show-overflow-tooltip/>
                <el-table-column label="其他分成说明" prop="otherFeeRemark" width="100" show-overflow-tooltip/>
                <el-table-column label="支出合计" prop="payAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="是否免佣" prop="noCommission" width="100" show-overflow-tooltip/>
                <el-table-column label="免佣金额" prop="noCommissionAmount" width="100" show-overflow-tooltip/>
                <el-table-column label="备注" prop="remark" width="100" show-overflow-tooltip/>
                <el-table-column label="" show-overflow-tooltip/>
                <el-table-column fixed="right" label="操作" align="center" width="120">
                    <template #default="scope">
                        <el-button
                                v-hasPerm="['sys:dyBill:save']"
                                type="primary"
                                link
                                size="small"
                                @click.stop="openDialog(scope.row.id)"
                        ><i-ep-edit />编辑</el-button
                        >
                        <el-button
                                v-hasPerm="['sys:dyBill:delete']"
                                type="primary"
                                link
                                size="small"
                                @click.stop="handleDelete(scope.row.id)"
                        ><i-ep-delete />删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                    v-if="total > 0"
                    v-model:total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="handleQuery"
            />
        </el-card>

        <el-dialog
                v-model="dialog.visible"
                :title="dialog.title"
                width="500px"
                :close-on-click-modal="false"
                @close="closeDialog"
        >
            <el-form
                    ref="dataFormRef"
                    :model="formData"
                    :rules="rules"
                    label-width="150px"
            >
                    <el-form-item label="店铺ID" prop="storeId">
                        <el-input v-model="formData.storeId" placeholder="请输入店铺ID" clearable/>
                    </el-form-item>
                    <el-form-item label="结算时间" prop="settlementTime">
                        <el-input v-model="formData.settlementTime" placeholder="请输入结算时间" clearable/>
                    </el-form-item>
                    <el-form-item label="订单号" prop="orderNo">
                        <el-input v-model="formData.orderNo" placeholder="请输入订单号" clearable/>
                    </el-form-item>
                    <el-form-item label="子订单号" prop="subOrderNo">
                        <el-input v-model="formData.subOrderNo" placeholder="请输入子订单号" clearable/>
                    </el-form-item>
                    <el-form-item label="结算金额" prop="settlementPrice">
                        <el-input v-model="formData.settlementPrice" placeholder="请输入结算金额" clearable/>
                    </el-form-item>
                    <el-form-item label="结算账户" prop="settlementAccount">
                        <el-input v-model="formData.settlementAccount" placeholder="请输入结算账户" clearable/>
                    </el-form-item>
                    <el-form-item label="结算单类型" prop="settlementType">
                        <el-input v-model="formData.settlementType" placeholder="请输入结算单类型" clearable/>
                    </el-form-item>
                    <el-form-item label="有结算前退款" prop="settlementRefund">
                        <el-input v-model="formData.settlementRefund" placeholder="请输入有结算前退款" clearable/>
                    </el-form-item>
                    <el-form-item label="下单时间" prop="orderTime">
                        <el-input v-model="formData.orderTime" placeholder="请输入下单时间" clearable/>
                    </el-form-item>
                    <el-form-item label="商品ID" prop="productId">
                        <el-input v-model="formData.productId" placeholder="请输入商品ID" clearable/>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="quantity">
                        <el-input v-model="formData.quantity" placeholder="请输入商品数量" clearable/>
                    </el-form-item>
                    <el-form-item label="业务类型" prop="businessType">
                        <el-input v-model="formData.businessType" placeholder="请输入业务类型" clearable/>
                    </el-form-item>
                    <el-form-item label="订单类型" prop="orderType">
                        <el-input v-model="formData.orderType" placeholder="请输入订单类型" clearable/>
                    </el-form-item>
                    <el-form-item label="订单总价" prop="orderAmount">
                        <el-input v-model="formData.orderAmount" placeholder="请输入订单总价" clearable/>
                    </el-form-item>
                    <el-form-item label="商品总价" prop="productAmount">
                        <el-input v-model="formData.productAmount" placeholder="请输入商品总价" clearable/>
                    </el-form-item>
                    <el-form-item label="运费" prop="transportFee">
                        <el-input v-model="formData.transportFee" placeholder="请输入运费" clearable/>
                    </el-form-item>
                    <el-form-item label="店铺劵" prop="preferential">
                        <el-input v-model="formData.preferential" placeholder="请输入店铺劵" clearable/>
                    </el-form-item>
                    <el-form-item label="结算前退款金额" prop="settlementRefundAmount">
                        <el-input v-model="formData.settlementRefundAmount" placeholder="请输入结算前退款金额" clearable/>
                    </el-form-item>
                    <el-form-item label="平台补贴" prop="preformSubsidy">
                        <el-input v-model="formData.preformSubsidy" placeholder="请输入平台补贴" clearable/>
                    </el-form-item>
                    <el-form-item label="达人补贴" prop="drSubsidy">
                        <el-input v-model="formData.drSubsidy" placeholder="请输入达人补贴" clearable/>
                    </el-form-item>
                    <el-form-item label="抖音支付补贴" prop="dySubsidy">
                        <el-input v-model="formData.dySubsidy" placeholder="请输入抖音支付补贴" clearable/>
                    </el-form-item>
                    <el-form-item label="抖音月付营销补贴" prop="dyMonthSubsidy">
                        <el-input v-model="formData.dyMonthSubsidy" placeholder="请输入抖音月付营销补贴" clearable/>
                    </el-form-item>
                    <el-form-item label="银行补贴" prop="bankSubsidy">
                        <el-input v-model="formData.bankSubsidy" placeholder="请输入银行补贴" clearable/>
                    </el-form-item>
                    <el-form-item label="以旧换新抵扣" prop="deduction">
                        <el-input v-model="formData.deduction" placeholder="请输入以旧换新抵扣" clearable/>
                    </el-form-item>
                    <el-form-item label="平台补贴运费" prop="platformSubsidyFee">
                        <el-input v-model="formData.platformSubsidyFee" placeholder="请输入平台补贴运费" clearable/>
                    </el-form-item>
                    <el-form-item label="用户实付" prop="buyAmount">
                        <el-input v-model="formData.buyAmount" placeholder="请输入用户实付" clearable/>
                    </el-form-item>
                    <el-form-item label="收入合计" prop="reiceveAmount">
                        <el-input v-model="formData.reiceveAmount" placeholder="请输入收入合计" clearable/>
                    </el-form-item>
                    <el-form-item label="平台服务费" prop="serviceAmount">
                        <el-input v-model="formData.serviceAmount" placeholder="请输入平台服务费" clearable/>
                    </el-form-item>
                    <el-form-item label="达人佣金" prop="commission">
                        <el-input v-model="formData.commission" placeholder="请输入达人佣金" clearable/>
                    </el-form-item>
                    <el-form-item label="服务商佣金" prop="carrierCommission">
                        <el-input v-model="formData.carrierCommission" placeholder="请输入服务商佣金" clearable/>
                    </el-form-item>
                    <el-form-item label="渠道分成" prop="channelFee">
                        <el-input v-model="formData.channelFee" placeholder="请输入渠道分成" clearable/>
                    </el-form-item>
                    <el-form-item label="招商服务费" prop="investmentServiceFee">
                        <el-input v-model="formData.investmentServiceFee" placeholder="请输入招商服务费" clearable/>
                    </el-form-item>
                    <el-form-item label="站外推广费" prop="promotionFee">
                        <el-input v-model="formData.promotionFee" placeholder="请输入站外推广费" clearable/>
                    </el-form-item>
                    <el-form-item label="其他分成" prop="otherFee">
                        <el-input v-model="formData.otherFee" placeholder="请输入其他分成" clearable/>
                    </el-form-item>
                    <el-form-item label="其他分成说明" prop="otherFeeRemark">
                        <el-input v-model="formData.otherFeeRemark" placeholder="请输入其他分成说明" clearable/>
                    </el-form-item>
                    <el-form-item label="支出合计" prop="payAmount">
                        <el-input v-model="formData.payAmount" placeholder="请输入支出合计" clearable/>
                    </el-form-item>
                    <el-form-item label="是否免佣" prop="noCommission">
                        <el-input v-model="formData.noCommission" placeholder="请输入是否免佣" clearable/>
                    </el-form-item>
                    <el-form-item label="免佣金额" prop="noCommissionAmount">
                        <el-input v-model="formData.noCommissionAmount" placeholder="请输入免佣金额" clearable/>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="formData.remark" placeholder="请输入备注" clearable/>
                    </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 导入弹窗 -->
        <el-dialog
                v-model="importDialog.visible"
                :title="importDialog.title"
                width="600px"
                append-to-body
                @close="closeImportDialog"
        >
            <el-form label-width="80px">
                <el-form-item label="Excel">
                    <el-upload
                            class="upload-demo"
                            action=""
                            drag
                            :auto-upload="false"
                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                            :file-list="excelFilelist"
                            :on-change="handleExcelChange"
                            :limit="1"
                    >
                        <el-icon class="el-icon--upload">
                            <i-ep-upload-filled/>
                        </el-icon>
                        <div class="el-upload__text">
                            将文件拖到此处，或
                            <em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">xls/xlsx files</div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleImport">确 定</el-button>
                    <el-button @click="closeImportDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
